<?php
use yii\helpers\Html;
/* @var $this \yii\web\View */
/* @var $content string */
/* @var $config array */
$this->title = '银马建材';
?>

<section class="page-section">

    <main class="page-form">

        <!-- back 菱形 -->
        <div class="back"></div>

        <!-- logo -->
        <h1 class="logo"></h1>

        <!-- desc -->
        <h3 class="title">操作说明</h3>
        <p class="desc">
            请刮开刮刮卡涂层，通过”扫一扫“扫描二维码或手动填入身份码和防伪码，点击”领取“
            即可获得不同金额的微信红包，直接发放到你的微信零钱中
        </p>

        <!-- form -->
        <form id="forms" class="form">
            <div class="form-group required">
                <label for="">身份码：</label>
                <div class="form-control">
                    <input type="text" id="identity" name="identity" placeholder="请输入身份码">
                </div>
            </div>

            <div class="form-group required">
                <label for="">防伪码：</label>
                <div class="form-control">
                    <input type="text" id="security" name="security" placeholder="请输入防伪码">
                </div>
            </div>

            <div class="form-group">
                <label for=""></label>
                <div class="form-control">
                    <button id="scanQRCode" type="button">
                        <span class="icon-s"></span>
                        <span>扫一扫</span>
                    </button>
                </div>
            </div>

            <div class="form-group required">
                <label for="">姓&emsp;名：</label>
                <div class="form-control">
                    <input type="text" name="name" placeholder="请输入姓名">
                </div>
            </div>

            <div class="form-group required">
                <label for="">电&emsp;话：</label>
                <div class="form-control">
                    <input type="text" name="mobile" id="mobile" placeholder="请输入电话">
                </div>
            </div>

            <div class="form-group required">
                <label for="">验证码：</label>
                <div class="form-control">
                    <input type="text" name="code" placeholder="请输入验证码">
                </div>
                <div class="form-button">
                    <button type="button" id="send-sms">获取验证码</button>
                </div>
            </div>
            <input type="hidden" name="_csrf-frontend" value="<?= Yii::$app->request->csrfToken ?>">

            <div class="form-group">
                <label for=""></label>
                <div class="form-control">
                    <button id="save" type="button">
                        <span class="icon-n"></span>
                        <span>领取</span>
                    </button>
                </div>
            </div>
        </form>

    </main>

</section>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
<script>
    var _csrf = '<?= Yii::$app->request->csrfToken ?>';
    wx.config(<?= $config ?>);
    wx.ready(function () {
        document.querySelector('#scanQRCode').onclick = function () {
            wx.scanQRCode({
                needResult: 1,
                desc: 'scanQRCode desc',
                success: function (res) {
                    var str = res.resultStr;
                    $.post('/index.php?r=site/search', {key: str, "_csrf-frontend":_csrf}, function (data) {
                        if (data.status === 'ok') {
                            $('#security').val(data.data.security_sn);
                            $('#identity').val(data.data.identity_code);
                        }
                    }, 'json');
                }
            });
        };

    });
    /**
     *  @params
     *  ele: element
     *  time: 倒计时秒数
     */
    function settime(ele, time) {
        if (time == 0) {
            ele.prop('disabled',false).text("获取验证码");
            time = 60;
            return;
        } else {
            ele.prop('disabled',true).text(`${time}秒后重发`);
            time--;
        }

        setTimeout(function() {
            settime(ele,time)
        },1000)
    }

    $(function(){
        // 校验
        $(".required input").blur(function(){
            var $this = $(this);
            var $parent = $this.closest('.form-group');
            $this.val() === '' ? $parent.addClass('form-error') : $parent.removeClass('form-error')
            if ($this.attr('name') === 'mobile') {
                // 验证电话
            }
        }).keyup(function(){
            $(this).triggerHandler("blur");
        }).focus(function(){
            $(this).triggerHandler("blur");
        });

        // 60s倒计时
        $('#send-sms').on('click', function() {
            var $time       = 60;
            var $this       = $(this);
            if ($('#mobile').val().length !== 11) {
                alert('请填写正确的手机号');
                return;
            }

            $.ajax({
                url: '/index.php?r=site/send-sms',
                method: 'post',
                dataType: 'json',
                data: {
                    mobile: $('input[name="mobile"]').val(),
                    "_csrf-frontend": '<?= Yii::$app->request->csrfToken ?>',
                },
                success: function (res) {
                    if (res && res.status === 'ok') {
                        settime($this,$time)
                    }
                }
            });

            settime($this,$time)
        });

        // 提交
        $('#save').on('click', function() {
            var $data = $('#forms').serialize();

            $(".required input").trigger("blur");

            if ($('.form-error').length === 0) {
                $.ajax({
                    url: '/index.php?r=site/receive',
                    method: 'post',
                    dataType: 'json',
                    data: $data,
                    success: function (res) {
                        if (res.status === 'ok') {
                            alert('恭喜您红包领取成功，请到零钱查看');
                            window.location.reload();
                        } else {
                            alert(res.msg);
                        }
                    },
                })
            } else {
                alert('请填写必要信息')
            }
        })

    })

</script>
